<template>
  <h1>业务1：当前鼠标位置</h1>
  <div>x: {{ pos.x }}</div>
  <div>y: {{ pos.y }}</div>
  <h2>业务2：当前点击次数 {{ count }}</h2>
  <button @click="changeCount">点击</button>
  <button @click="count++">点击</button>
</template>

<script setup lang="ts">
// 🔔 script setup 顶层的绑定会自动暴露给模板
import { onMounted, onUnmounted, reactive, ref } from 'vue'
// 业务1：
// 确定对象结构，可用 reactive 定义响应式数据
const pos = reactive({
  x: 0,
  y: 0,
})

// 把事件处理函数抽离出来，用于移除事件
const handleMousemove = (e: MouseEvent) => {
  pos.x = e.clientX
  pos.y = e.clientY
}

// 组件挂载，添加全局事件绑定
onMounted(() => {
  console.log('第一个onMounted')
  document.addEventListener('mousemove', handleMousemove)
})

// 组件卸载，移除全局事件绑定
onUnmounted(() => {
  document.removeEventListener('mousemove', handleMousemove)
})

// 业务2：计数器
// 普通类型数据，通过 ref 定义响应式数据
const count = ref(0)
const changeCount = () => {
  count.value++
}
// 如果有需要，可以调用多次 onMounted 等生命周期钩子
onMounted(() => {
  console.log('第二个onMounted')
})
</script>
